<template>
	<view class="componentShow">
		<view class="container">
			<!-- 顶部背景 -->
			<view style="margin-top:-50rpx;height: 486rpx; position: relative;margin-bottom: 80rpx;">
				<image src='https://linbo.vip:8888/wccQQP.png' mode="widthFix" class='png'
					style='width:100%;height:486rpx'>
				</image>
			</view>
			<!-- 标题 -->
			<view class="title-header">
				<view class="title-text">
					组 / 件 / 演 / 示
				</view>
			</view>
			<!-- 选项卡 -->
			<view class='nav-list'>
				<navigator open-type="navigate" hover-class='none' :url="'/pageA/index/' + item.title"
					:class="'nav-li bg-card' + (index+1)" v-for="(item, index) in componentList" :key="index">
					<view class="nav-name">{{item.name}}</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				componentList: [{
						title: 'map',
						name: '地图查询',
						color: ''
					},
					{
						title: 'signature',
						name: '电子签名',
						color: ''
					},
					{
						title: 'charts',
						name: '图表展示',
						color: ''
					},
					{
						title: 'ble',
						name: '蓝牙连接',
						color: ''
					},
					{
						title: 'chat',
						name: '聊天功能',
						color: ''
					},
					{
						title: 'docs',
						name: '文档预览',
						color: ''
					},
					{
						title: 'camera',
						name: '自定义相机',
						color: ''
					},
					{
						title: 'cloud',
						name: '云盘',
						color: ''
					}
				],
			};
		},
		onTabItemTap(e) {
			if (e.text === '个人中心') getInfo(this)
		},
		methods: {}
	}
</script>

<style lang="less" scoped>
	page {}


	.componentShow {
		margin: 0;
		width: 100%;
		height: 100vh;
		color: #fff;
		background: linear-gradient(45deg, #00F5D4, #01BEFF, #9A5CE5, #F15BB5);
		background-size: 400% 400%;
		animation: gradientBG 10s ease infinite;

		.container {
			width: 100%;
			position: absolute;
			text-align: center;

			.title-header {
				// position: absolute;
				// width: 100%;
				// top: 100rpx;
				// left: 50%;
				// transform: translateX(-50%);
				margin-top: -150rpx;
				display: flex;
				height: 120rpx;
				font-size: 40rpx;
				align-items: center;
				justify-content: center;
				/* padding: 40rpx 0 0 0; */
				font-weight: bold;
				background-image: url(https://linbo.vip:8888/wccswF.png);
				background-size: 100%;
			}

			.title-text {
				background-image: -webkit-linear-gradient(0deg, #ff8a34, #FBBD12);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				/* 	border: 10px solid #ddd;
			border-image: -webkit-linear-gradient(red, yellow);
			border-image: -moz-linear-gradient(red, yellow);
			border-image: linear-gradient(red, yellow); */
			}
		}

		// 组件卡片
		.nav-list {
			display: flex;
			flex-wrap: wrap;
			padding: 0px 40upx 0px;
			justify-content: space-between;

			.nav-li {
				padding: 30upx;
				border-radius: 12upx;
				width: 45%;
				margin: 0 2.5% 40upx;
				background-image: url(https://linbo.vip:8888/NyU04x.png);
				background-size: cover;
				background-position: center;
				position: relative;
				z-index: 1;
				box-shadow: 10rpx 10rpx 12rpx 1rpx rgba(0, 0, 0, .1);

				text {
					position: absolute;
					right: 30upx;
					top: 30upx;
					font-size: 52upx;
					width: 60upx;
					height: 60upx;
					text-align: center;
					line-height: 60upx;
				}

				&::after {
					content: "";
					position: absolute;
					z-index: -1;
					background-color: inherit;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: -10%;
					border-radius: 10upx;
					opacity: 0.2;
					transform: scale(0.9, 0.9);
				}
			}

			.nav-name {
				font-size: 28upx;
				text-transform: Capitalize;
				margin-top: 20upx;
				position: relative;
				text-align: left;

				&::before {
					content: "";
					position: absolute;
					display: block;
					width: 40upx;
					height: 6upx;
					background: #fff;
					bottom: 0;
					right: 0;
					opacity: 0.5;
				}

				&::after {
					content: "";
					position: absolute;
					display: block;
					width: 100upx;
					height: 1px;
					background: #fff;
					bottom: 0;
					right: 40upx;
					opacity: 0.3;
				}

				&::first-letter {
					font-weight: bold;
					font-size: 36upx;
					margin-right: 1px;
				}

			}
		}
	}

	/* 组件卡片背景色 */
	.bg-card1 {
		background-color: #FF5656;
		color: #fff;
	}

	.bg-card2 {
		background-color: #6F68DF;
		color: #fff;
	}

	.bg-card3 {
		background-color: #9c26b0;
		color: #fff;
	}

	.bg-card4 {
		background-color: #0070FF;
		color: #fff;
	}

	.bg-card5 {
		background-color: #1cbbb4;
		color: #fff;
	}

	.bg-card6 {
		background-color: #BC78EC;
		color: #fff;
	}

	.bg-card7 {
		background-color: #f39902;
		color: #fff;
	}

	.bg-card8 {
		color: #fff;
		background-color: #19CF8A;
	}

	@keyframes gradientBG {
		0% {
			background-position: 0% 50%;
		}

		50% {
			background-position: 100% 50%;
		}

		100% {
			background-position: 0% 50%;
		}
	}
</style>
